<!--
 * @页面名称:修改分类弹出框
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div>
    <el-dialog v-model="sortModalVisible" title="修改分类" width="30%" draggable>
      <ztree
        style="height: calc(100% - 42px); padding: 5px 8px"
        :setting="treeSetting.setting"
        :nodes="treeSetting.treeData"
        @onClick="onClick"
      >
      </ztree>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="sortModalVisible = false">取消</el-button>
          <el-button type="primary" @click="handle"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import Ztree from "@/components/Ztree/Ztree.vue";
import { useDynamicStore } from "@/stores/modules/dynamic";
import { useCatalogStore } from "@/stores/modules/catalog";
import CommonRule from "../ts/commonRule";
import { useRoute } from "vue-router";
import useCurrentInstance from "@/utils/useCurrentInstance";

const props = defineProps({
  type: {
    type: String,
    default: () => {
      return "";
    }
  },
  fmtObj: {
    type: Array as any,
    default: () => {
      return [];
    }
  },
  activeName: {
    type: String,
    default: () => {
      return "";
    }
  }
});

const { proxy } = useCurrentInstance();
const dynamicStore = useDynamicStore();
const catalogStore = useCatalogStore();
// 弹框是否显示
const sortModalVisible = ref(false);
const route = useRoute();
// 路由携带的参数
const routeData = route.query;
// tree配置
const treeSetting = reactive({
  setting: {
    // ztree配置
    data: {
      simpleData: {
        enable: true,
        idKey: "Catalog_ID",
        pIdKey: "Catalog_Father"
      },
      key: {
        name: "Catalog_Name"
      }
    },
    view: {
      showIcon: false
    }
  },
  treeData: [] as any[],
  treeNode: {} as any
});
// 打开修改分类窗体
const open = () => {
  sortModalVisible.value = true;
  const result: any[] = [];
  catalogStore.catalogList.forEach((item: any) => {
    result.push({ ...item, Catalog_Name: `${item.Catalog_Code} ${item.Catalog_Name}`, open: item.Catalog_Enable_Expand });
  });
  treeSetting.treeData = result;
};
// 点击树节点
const onClick = (treeNode: any) => {
  treeSetting.treeNode = treeNode;
};
//点击确认事件
const handle = async () => {
  sortModalVisible.value = false;
  proxy.$showLoading({ tip: "正在修改分类" });
  switch (props.type) {
    case "folder":
      if (dynamicStore.tableSelect.length > 0) {
        const { visibleConfig } = dynamicStore;
        const fieldRule = visibleConfig.FieldRule.filter((v: any) => v.FR_Enable === true);
        const RuleData = new CommonRule({
          list: dynamicStore.tableSelect,
          currentTreeNode: treeSetting.treeNode,
          ruleList: fieldRule,
          tableName: visibleConfig.FMT.FMT_TableName,
          type: "folder"
        });
        dynamicStore.childTableData = [];
        await RuleData.validation();
      } else {
        proxy.$warning({
          title: "提示",
          content: "请选择数据!"
        });
      }
      break;
    case "child":
      if (dynamicStore.childTableData.length > 0) {
        const { childVisibleConfig } = dynamicStore;
        const fieldRule = childVisibleConfig.FieldRule.filter((v: any) => v.FR_Enable === true);
        const RuleData = new CommonRule({
          list: dynamicStore.childTableSelect,
          currentTreeNode: treeSetting.treeNode,
          ruleList: fieldRule,
          tableName: childVisibleConfig.FMT.FMT_TableName,
          type: "child"
        });
        await RuleData.validation();
      } else {
        proxy.$warning({
          title: "提示",
          content: "请选择数据!"
        });
      }
      break;
    default:
      break;
  }

  proxy.$hideLoading();
  proxy.$message.success("操作成功");
};
defineExpose({ open });
</script>

<style scoped lang="scss">
:deep(.el-dialog__body) {
  height: 360px;
}
</style>
../ts/commonRule
